<template>
  <div class="content">
    <headline v-bind:title="title"></headline>
    <div class="filter">
      <el-form label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称:">
              <el-input v-model="name" placeholder="请输入" class="input" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品描述:">
              <el-input v-model="subtitle" placeholder="请输入" class="input" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一级品类:">
              <el-select v-model="stair" placeholder="请选择" @change="getVfp" class="input" :disabled="readonly">
                <el-option :value="item.id" :label="item.name" v-for="item in stairLst" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级品类">
              <el-select v-model="vfp" :disabled="readonly" placeholder="请选择" class="input">
                <el-option :value="item.id" :label="item.name" v-for="(item, key) in vfpLst" :key="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品价格:">
              <el-input type="number" v-model="price" placeholder="请输入" class="input" :readonly="readonly">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品库存:">
              <el-input type="number" v-model="stock" placeholder="请输入" class="input" :readonly="readonly">
                <template slot="append">件</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="this.imgSh === 'view'">
            <el-form-item label="商品图片:">
              <img :src="images" alt=""/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="this.imgSh !== 'view'">
            <el-form-item label="商品图片:">
              <el-upload
                  class="upload-box"
                  action="/api/manage/product/upload.do"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  multiple
                  name="upload_file">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt/>
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="商品详情:">
              <tinymce @catchData="five"></tinymce>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <below v-bind:shwHde="shwHde"></below>
  </div>
</template>
<script>
import tinymce from "../../components/tinymce.vue";
import headline from "../headline.vue";
import below from "../below.vue";

export default {
  components: {tinymce, headline, below},
  data() {
    return {
      title: "",
      shwHde: [true, true],
      readonly: false,
      imgSh: "",
      name: "",
      subtitle: "",
      stair: "",
      vfp: "",
      price: "",
      stock: "",
      stairLst: [],
      vfpLst: [],
      imglist: [],
      images: "",
      subImages: "",
      detail: "",
      status: 1,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  mounted() {
    this.imgSh = this.$route.params.public;
    if (this.imgSh === "add") {
      this.title = "商品管理-添加商品";
      this.shwHde = [true, true];
      this.readonly = false;
      this.getStair()
    } else if (this.imgSh === "view") {
      this.title = "商品管理-查看商品";
      this.shwHde = [false, true];
      this.readonly = true;
    } else if (this.imgSh === "edit") {
      this.title = "商品管理-编辑商品";
      this.shwHde = [true, true];
      this.readonly = false;
    }
    if (this.imgSh !== "add") {
      new Promise((resolve) => {
        this.getStair(resolve)
      }).then(() => {
        return new Promise((resolve) => {
          this.check(resolve)
        });
      }).then(() => {
        this.getVfp()
      });
    }
  },
  watch: {
    imglist() {
      this.subImages = this.imglist.join(",");
    },
  },
  methods: {
    // 富文本编辑器
    five(n) {
      console.log(n)
      this.detail = n;
    },
    // 一级品类
    getStair() {
      let data = this.qs.stringify({categoryId: 0});
      this.axios.post("/api/manage/category/get_category.do", data).then((res) => {
        if (res.data.status === 0) {
          this.stairLst = res.data.data;
        }
      });
    },
    // 二级品类
    getVfp() {
      if (this.vfp !== '') {
        this.vfp = ''
      }
      let data = this.qs.stringify({categoryId: this.stair});
      this.axios.post("/api/manage/category/get_category.do", data).then((res) => {
        if (res.data.status === 0) {
          this.vfpLst = res.data.data;
        }
      });
    },
    // 上传图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.imglist.forEach((v, i, arr) => {
        if (file.response.data.uri === v) {
          arr.splice(i, 1);
        }
      });
      console.log(fileList);
    },
    handleSuccess(res) {
      if (res.status === 0) {
        this.imglist.push(res.data.uri);
      }
    },
    // 查看数据
    check(resolve) {
      let postData = this.qs.stringify({productId: this.$route.params.id});
      this.axios({method: "POST", url: "/api/manage/product/detail.do", data: postData}).then((res) => {
        let arr = res.data.data;
        this.name = arr.name;
        this.subtitle = arr.subtitle;
        this.stair = arr.parentCategoryId;
        this.vfp = arr.categoryId;
        this.price = arr.price;
        this.stock = arr.stock;
        this.images = arr.imageHost + arr.mainImage;
        this.detail = arr.detail;
        this.status = arr.status;
        resolve()
      });
    },
    // 提交按钮
    save() {
      let data = this.qs.stringify({
        name: this.name,
        subtitle: this.subtitle,
        parentCategoryId: this.yjfl,
        categoryId: this.ejfl,
        price: this.price,
        stock: this.stock,
        subImages: this.subImages,
        detail: this.detail,
        status: this.imgSh === "edit" ? this.status : 2,
        id: this.imgSh === "edit" ? this.$route.params.id : null,
      });
      this.axios.post("/api/manage/product/save.do", data).then((res) => {
        if (res.data.status === 0) {
          this.$message({message: res.data, type: "success"});
          this.getBack()
        }
      });
    },
    // 返回按钮
    getBack() {
      this.$router.push({path: "/home/commodity"});
    },
  },
};
</script>
<style scoped lang="less">
.content {
  overflow-y: auto;
  overflow-x: hidden;
}
</style>